<template>
  <el-card class="box-card">
    <div class="layout-container">
      <el-tabs value="basicSetting">
        <el-tab-pane label="基本配置" name="basicSetting">
          <el-form :model="form1" style="width: 50%">
            <el-form-item label="发布名称">
              <el-input v-model="form1.project_name"></el-input>
            </el-form-item>
            <el-form-item label="所属项目">
              <el-input v-model="form1.select_project"></el-input>
            </el-form-item>
            <el-form-item label="所属人">
              <el-input v-model="form1.owner" autosize></el-input>
            </el-form-item>
            <el-form-item label="任务说明">
              <el-input v-model="form1.taskdetails" autosize></el-input>
            </el-form-item>
            <el-form-item label="前置处理器">
              <el-input v-model="form1.pre_process" autosize></el-input>
            </el-form-item>
            <el-form-item label="参数配置">
              <json-editor v-model="form1.param"></json-editor>
            </el-form-item>
            <el-form-item label="展示配置">
              <json-editor v-model="form1.showdata"></json-editor>
            </el-form-item>
            <el-form-item label="步骤配置">
              <json-editor v-model="form1.step"></json-editor>
            </el-form-item>
            <el-form-item>
              <div vertical-align="center" align="center">
                <el-button type="primary">Submit</el-button>
                <el-button>Cancel</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="其他配置" name="otherSetting">
          <el-form :model="form2" style="width: 50%">
            <el-form-item>
              <p>版本号:</p>
              <el-select v-model="form2.version" placeholder="select">
                <el-option value="CRM">CRM</el-option>
                <el-option value="MBS">MBS</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务参数:">
              <el-input type="textarea" v-model="form2.task_param" :rows="4"></el-input>
            </el-form-item>
            <el-form-item label="crontab:">
              <el-input type="textarea" v-model="form2.crontab" :rows="4"></el-input>
            </el-form-item>
            <el-form-item>
              <div vertical-align="center" align="center">
                <el-button type="primary">Submit</el-button>
                <el-button>Cancel</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
   </div>
  </el-card>
</template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";
    import JsonEditor from '@/components/JsonEditor'
    import 'codemirror/addon/lint/lint'
    import 'codemirror/addon/lint/lint.css'
    import 'codemirror/addon/lint/json-lint'
    import 'codemirror/addon/display/autorefresh' //及时自动更新，配置里面也需要设置autoRefresh为true

    export default {
      components: {
        JsonEditor
      },
      name : "CreateTask",
      data() {
        return {
          value:'',
          form1: {
            project_name: '',
            select_project: '',
            owner: '',
            taskdetails: '',
            pre_process:'',
            showdata:'',
            param:'',
            step:''
          },
          form2: {
            crontab: '',
            task_param: '',
            version: ''
          },
        }
      },
      methods: {

      }
    }
  </script>

<style scoped>
  .code{
    text-align: left;
    border: 2px solid #9e9e9e;
    width: 600px;
    height: 400px;
  }

</style>
<style>
  .shopee-form-item__control {
    width: 650px;
  }
  .shopee-input{
    width: 100%;
  }
  .json-editor {
    width: 100%;
  }
</style>
